<template>
  <div id="user-head">
    <div class="user-head-left"></div>
    <div class="user-head-center"><slot name="user-head-center"></slot></div>
    <div class="user-head-right"></div>
  </div>
</template>
<script>
export default {
  name:'UserHead'
}
</script>
<style>
#user-head .user-head-left,
#user-head .user-head-right{
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  z-index: 1;
}
#user-head .user-head-left{
  border-right: 50px solid rgb(140,48,245);
}
#user-head .user-head-right{
  border-left: 50px solid rgb(140,48,245);
}
#user-head .user-head-center{
  position: relative;
  top: 0;
  left: 0;
  display: inline-block;
  justify-content: center;
  background-color: rgb(140,48,245);
  width: 10rem;
  height: 5rem;
  font-size: 14px;
  color: #fff;
  box-shadow: rgb(0 0 0 / 20%) 10px 0px 50px 2px;
}
</style>